<template>
  <view class="center">
    <view class="column" v-for="(item,index) in userList">
      <view class="top center">
        <text style="top:-25rpx;left:3rpx;" v-if="item.is_main===1" class="first">发起人</text>
        <image :src="item.driver_avatar" mode=""></image>
        <text style="bottom:-5rpx;right:-50rpx;" v-if="item.status===0" class="first">待加注</text>
      </view>
      <view class="text">{{item.driver_name}}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { navTo } from '@/utils/navigator';
  import { ref } from 'vue';
  const props = defineProps({
    userList: {
      type: Array,
      default: [],
    },
  });
</script>

<style scoped lang="less">
  .text {
    max-width: 90rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .top {
    width: 91rpx;
    height: 91rpx;
    background: #F4F4F4;
    border: 2px solid #F06E02;
    border-radius: 50%;
    position: relative;
    margin-top: 20rpx;
    justify-content: center;
    margin: 40rpx 20rpx 10rpx 0px;

    .first {
      width: 86rpx;
      height: 32rpx;
      background: linear-gradient(158deg, #F06E02, #F38813);
      border-radius: 15px;
      text-align: center;
      line-height: 30.6rpx;
      font-size: 20rpx;
      font-weight: 400;
      color: #FFFFFF;
      position: absolute;
      z-index: 2;
    }

    image {
      width: 91rpx;
      height: 91rpx;
      border-radius: 50%;
    }
  }
</style>